<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .active {
        color: red;
      }
    </style>
  </head>
  <body>
    <!-- 
      $event 的内容是什么：
        
        1. 普通事件时，它是事件对象
        2. 自定义事件时，它是触发该自定义事件时传递过去的参数

     -->

    <div id="app"></div>

    <script src="../lib/vue3.js"></script>
    <script>
      const app = Vue.createApp({
        // 根组件
        template: `
          <div style="display: flex;">
            <my-aside :id="curId" :posts="list" @change="onChange" />

            <my-blog 
              :title="curPost.title" 
              :body="curPost.body" />
          </div>
        `,

        data() {
          return {
            // 用于表示当前选择的帖子ID
            curId: 1,
            list: [
              {
                id: 1,
                title: "西游记",
                body: "谢谢谢谢谢谢",
              },
              {
                id: 2,
                title: "水浒传",
                body: "水浒传水浒传水浒传水浒传水浒传水浒传水浒传水浒传",
              },
              {
                id: 3,
                title: "三国演义",
                body: "三国演义三国演义三国演义三国演义三国演义三国演义三国演义三国演义三国演义三国演义",
              },
            ],
          };
        },

        computed: {
          // 当前选择的帖子
          curPost() {
            return this.list.find((item) => item.id === this.curId);
          },
        },

        methods: {
          onChange(arg) {
            console.log("root onChange", arg);

            this.curId = arg;
          },
        },
      });

      app.component("my-aside", {
        props: ["posts", "id"],

        template: `
          <ul>
            <li 
              v-for="item in posts" :key="item.id"
              :class="{ active: item.id === id }"
              @click="onClick(item)"
            >
              {{ item.title }}
            </li>
          </ul>
        `,

        methods: {
          onClick(data) {
            // console.log("onClick", data);

            // 通知父亲，使用 $emit() 触发一个自定义事件
            //    $emit('自定义事件名字', '要携带给自定义事件处理函数的参数')
            //        自定义事件处理函数通过 $event 就可以获取到传递过去的参数
            this.$emit("change", data.id);
          },
        },
      });

      app.component("my-blog", {
        props: ["title", "body"],

        template: `
          <div>
            <h1>{{ title }}</h1>

            <main>{{ body }}</main>
          </div>
        `,
      });

      // 挂载应用
      app.mount("#app");
    </script>
  </body>
</html>
